<script setup lang="ts">
import SignView from "../../../components/SignView.vue"
import {downloadPDF} from "../../../utils/htmlToPdf.js"
import {reactive} from "vue";

const data = reactive({
  signing: false
})

const getPdfByHtml = () => {
  data.signing = true
  setTimeout(() => {
    downloadPDF('agreement-container', '用户协议').then(res => {
      data.signing = false
    })
  })
}

</script>

<template>
  <div class="ver-layout agreement-page">
    <div id="agreement-container">
      <div class="agreement-layout ver-layout-center">
        <h2>用户协议</h2>
        <div class="agreement-content">
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div>
      </div>

      <div class="sign-layout">
        <div class="sign-title">请在下方空白处签名</div>
        <sign-view :signing="data.signing"></sign-view>
      </div>
    </div>
    <van-button type="primary" class="sign-btn" @click="getPdfByHtml">确定并开始授权</van-button>
  </div>
</template>

<style lang="less">
.agreement-page {
  width: calc(100% - 40px);
  margin: 20px;

  .agreement-layout {
    padding: 20px;
    padding-top: 0px;
    border: 1px solid #333333;

    .agreement-content {
      word-break: break-word;
    }
  }

  .sign-layout {
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #333333;

    .sign-title {
      font-size: 15px;
      font-weight: bold;
    }
  }

  .sign-btn {
    width: 200px;
    margin: auto;
    margin-top: 30px;
  }
}
</style>
